<!--博客列表组件-->

<script>
export default {
  name: "BlogList",
  //接收参数
  props: {
    categoryName: null,
    type: null,   //用来作为博客的查询条件，例如用户博客等
    showOpt: false,   //编辑删除显示参数
  },
  data() {
    return {
      tableData: [],  // 所有的数据
      pageNum: 1,   // 当前的页码
      pageSize: 10,  // 每页显示的个数
      total: 0,

    }
  },
  //数据监听
  watch: {
    //categoryName因为多层次变化导致数据查询错误
    categoryName() {
      this.loadBlogs(1);
    },
  },
  created(){
    this.loadBlogs(1);
  },
  methods: {
    handleSizeChange(pageSize){
      this.pageSize = pageSize;
      this.pageNum=1;
      this.loadBlogs();
    },
    handleCurrentChange(pageNum) {
      this.pageNum = pageNum
      this.loadBlogs();
    },
    loadBlogs(pageNum) {
      if (pageNum) this.pageNum = pageNum
      let url
      switch (this.type) {
        case 'user': url='/blog/selectUser'; break;
        case 'like': url='/blog/selectLike'; break;
        case 'collect': url='/blog/selectCollect'; break;
        case 'comment': url='/blog/selectComment'; break;
        default: url='/blog/selectPage';
      }
      this.$request.get(url, {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,
          title: this.$route.query.title,
          categoryName: this.categoryName === "全部博客"? null: this.categoryName,   //根据当前选中的博客进行查询
          // title: this.title,
        }
      }).then(res => {
        this.tableData = res.data?.list
        this.total = res.data?.total
      })
    },
    del(id) {   // 单个删除
      this.$confirm('您确定删除吗？', '确认删除', {type: "warning"}).then(response => {
        this.$request.delete('/blog/delete/' + id).then(res => {
          if (res.code === '200') {   // 表示操作成功
            this.$message.success('操作成功')
            this.loadBlogs(1)
          } else {
            this.$message.error(res.msg)  // 弹出错误的信息
          }
        })
      }).catch(() => {
      })
    },
    editBlog(blogId) {
      window.open('/front/newBlog?blogId=' + blogId)
    },
  }
}
</script>

<template>
    <!-- <div></div> -->
    <div style="flex:1; min-height: 80vh"  class="card">
      <div  v-if="total">
      <div class="blog-box" v-for="item in tableData" :key="item.id"  >
        <div  style="flex:1; width: 0">
          <!--标题-->
          <a :href="'/front/blogDetail?blogId='+item.id" target="_blank">
            <div class="blog-title" style="">{{item.title}}</div>
          </a>
          <!--            简介-->
          <div class="line1" style="color: #313131; font-size: 13px ">{{item.descr}}</div>
          <div style="display: flex;margin-top: 15px;align-items:center" >
            <div style="flex: 1; font-size: 13px">
              <span><i class="el-icon-user" style=" "></i>{{item.userName}}</span>
              <span><i class="el-icon-eye" style=" margin-left: 5px"></i>{{item.readCount}}</span>
              <span><i class="el-icon-dianzan2" style="margin-left: 5px"></i>{{item.likesCount}}</span>
              <span   v-if="showOpt"  style="margin-left: 40px; color: red; cursor: pointer" @click="del(item.id)"><i class="el-icon-delete"></i>删除</span>
              <span   v-if="showOpt" style="margin-left: 10px; color: #2a60c9; cursor: pointer" @click="editBlog(item.id)"><i class="el-icon-edit"></i>编辑</span>
            </div>
            <div style="width: fit-content">
              <!--v-for支持json解析，直接解析获取对应标签数据-->
              <el-tag v-for="(item,index) in JSON.parse(item.tags || '[]')"  :key="index" type="primary" style="margin-right: 10px">{{ item }}</el-tag>
            </div>
          </div>
        </div>
        <div v-if="item.cover" style="width: 150px; margin-left: 10px">
          <img style="width:100%; height:80px; border-radius:7px"  :src="item.cover"  alt="">
        </div>
      </div>
    </div>
      <div v-if="total === 0" style="padding: 20px 0; text-align: center; font-size: 16px; color: #666">暂无数据</div>
      <div style="margin-top: 10px;"  v-if="total">
        <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="pageNum"
            :page-sizes="[5, 10, 15, 20]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total">
        </el-pagination>
      </div>
    </div>
</template>

<style >
.blog-box {
  display: flex;
  grid-gap: 15px;
  padding: 10px 0;
  border-bottom: 1px solid #ddd;
}
.blog-box:first-child {
  padding-bottom: 0;
}
.blog-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 8px;
  cursor: pointer;
}
.blog-title:hover {
  color: #2656b5;
}

</style>